$(function() {
    // 左侧固定区域右滑
    $(".fixe").mouseenter(function() {
            $(".slid").stop().animate({ right: '0px' });
        }).stop().mouseleave(function() {
            $(".slid").stop().animate({ right: '-40px' });
        })
        // 轮播图函数类
    class CarouselDiagram {
        constructor() {
            this.i = 0;
            this.time = null;
            this.time2 = null;
            this.j = 0;
        }
        move() {
            let that = this
            this.time = setInterval(function() {
                that.i++;
                that.imgMove()
                if (that.i >= 2) {
                    that.i = 0;
                    $(".banners").children("div").animate({ "left": 0 + "px" }, 0);
                    that.setbig()
                }
                that.setbig()
            }, 1500)
        }
        move2() {
            let that = this
            this.time2 = setInterval(function() {
                let x = 0
                if (that.j > 40) {
                    that.j = 0;
                    x = 40 * that.j
                    $(".Starts").children("div").stop().animate({ left: -x + "px" }, 0)
                    that.j++
                } else {
                    x = 50.2 * that.j
                    $(".Starts").children("div").stop().animate({ left: -x + "px" }, 600)
                }
                that.j++
            }, 600)
        }
        imgMove() {
            let img_x = $(".banners").children("div").children("img").width();
            let widths = this.i * img_x
            $(".banners").children("div").stop().animate({ "left": -widths + "px" });
        }
        setbig() {
            $(".lunbo").children().eq(this.i).css({
                backgroundColor: "red"
            }).siblings().css({
                backgroundColor: "black"
            })
        }

        evenbind() {
            let that = this;
            this.move();
            this.setbig()
            this.move2();
            $(".Starts").children("div").mouseenter(function() {
                clearInterval(that.time2)
            })
            $(".Starts").children("div").mouseleave(function() {
                that.move2()
            })
            $(".banners").mouseleave(function() {
                that.move();
            })
            $(".banners").mouseenter(function() {
                clearInterval(that.time)
            })
            $(".lunbo").children("li").click(function(event) {
                that.i = $(event.target).index()
                that.imgMove();
                that.setbig();
            })
        }
    }
    let L = new CarouselDiagram();
    document.onvisibilitychange = function() {
        if (this.visibilityState == "hidden") {
            clearInterval(L.time);
            clearInterval(L.time2);
        }
        if (this.visibilityState == "visible") {
            console.log(123);
            L.move();
            L.move2()
        }
    }
    $.get("../php/goodsAndShoppingCart/bannerGet.php", function(resText, status) {
        fn(resText)
    }, 'json')

    function fn(data) {
        console.log(data);
        let img = ``;
        let imgs = ``;
        for (let i = 0; i < data.length; i++) {
            if (i <= 2) {
                img += `<img src="${data[i].img}" alt=""></img>`
            } else {
                imgs += `<img src="${data[i].img}" alt=""></img>`
            }
        }
        $(".banners").children().eq(0).html(`${img}`)
        $(".Starts").children().eq(0).html(`${imgs}`)
        L.evenbind();

    }

})